<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="kva-form-search">
          <el-form :inline="true" :model="queryParams">
            <el-form-item>
              <el-button type="primary" icon="Plus" @click="handleAdd">添加冷池</el-button>
            </el-form-item>
            <el-form-item label="关键词：">
              <el-input v-model="queryParams.keyword" placeholder="请输入搜索冷池名称..." maxlength="10" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click.prevent="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
            :data="tableData"
            :height="settings.tableHeight()">
          <el-table-column prop="cooling_pool_id" fixed="left" label="ID" width="80" />
          <el-table-column prop="cooling_pool_name"  label="冷池名称"  align="center"/>
          <el-table-column  label="所属房间"  align="center">
            <template #default="scope">
              {{ scope.row.room?.room_name }}
            </template>
          </el-table-column>
          <el-table-column label="房间类型" align="center" >
            <template #default="scope">
              {{ scope.row.room?.room_type == 1 ? '进线房':scope.row.room?.room_type == 2 ?'机房':''}}
            </template>
          </el-table-column>
          <el-table-column label="检查类型" align="center" >
            <template #default="scope">
              {{ scope.row.type == "chose" ? '选择':'输入'}}
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" align="center" />
          <el-table-column prop="updated_at" label="更新时间" align="center" />

          <el-table-column fixed="right" align="center" label="操作" width="260">
            <template #default="{row,$index}">
              <el-button text icon="edit" @click="handleEdit(row)"  type="primary">编辑</el-button>
              <el-button text icon="remove" @click="handleDel(row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="kva-pagination-box">
          <el-pagination
              v-model:current-page="queryParams.page"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10,20,30,50,100, 200]"
              small
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </home-page-header>
    </div>
    <!--添加和修改系统角色-->
    <add-pool ref="addRef" @load="handleLoadData"></add-pool>
  </div>
</template>

<script  setup>
import KVA from '@/utils/kva.js'
import settings from '@/settings';
import { formatTimeToStr } from '@/utils/date'
import { page,DelById } from '@/api/pool.js'
import AddPool from '@/views/coolingPool/components/AddPool.vue'


// 添加冷池ref
const addRef = ref(null);
// 添加
const handleAdd = ()=>{
  addRef.value.handleOpen()
}
// 编辑
const handleEdit =  async (row) => {
  // 在打开,再查询，
  addRef.value.handleOpen(row.cooling_pool_id)
}

// 搜索属性定义
const queryParams = reactive({
  page:1,
  pageSize:10,
  keyword:""
})

// 数据容器
const tableData = ref([])
const total = ref(0)

// 搜索
const handleSearch = ()=> {
  queryParams.page = 1
  queryParams.total = 0
  queryParams.pageSize = 10
  handleLoadData()
}

// 查询列表
const handleLoadData = async ()=>{
  const resp = await page(queryParams)
  tableData.value = resp.data.list;
  total.value = resp.data.total
  queryParams.page = resp.data.page
}

// 改变分页Size
const handleSizeChange = (psize)=>{
  queryParams.page = 1
  queryParams.pageSize = psize
  handleLoadData()
}

// 改变分页PageNo
const handleCurrentChange = (pno)=>{
  queryParams.page = pno
  handleLoadData()
}

// 删除单个
const handleDel =  async (row) => {
  await KVA.confirm("警告","你确定要抛弃我么？",{icon:"error"})
  await DelById(row.cooling_pool_id)
  KVA.notifySuccess("删除成功")
  handleLoadData()
}


// 生命周期加载
onMounted(()=>{
  handleLoadData()
})


</script>
